<!--
 * @Author: caozaihui 15908754730@163.com
 * @Date: 2024-06-14 00:47:40
 * @LastEditors: czh 2119294696@qq.com
 * @LastEditTime: 2024-06-24 22:46:40
 * @FilePath: \YMU_forum_vue\src\views\Register\components\Step1.vue
 * @Description: 注册步骤1
-->

<script setup>
import { TopRight, MagicStick } from '@element-plus/icons-vue'
import { useRouter } from 'vue-router';
import { getCaptha, register } from '@/apis/login';
import { ref, onMounted } from 'vue';
import { randomStr } from '@antfu/utils';
import { useAccountStore } from '@/stores/useAccountStore.js'
const router = useRouter();

const registerPara = ref({
    account: '',
    code: '',
    key: '',
    password: ''
})
const captcha = ref('')
const key = ref(randomStr())
const msg =ref('')
onMounted(async () => {
    getCaptha(key).then(res => {
        let url = window.URL.createObjectURL(res);
        captcha.value = url;
    })
})
const refreshCaptcha = () => {
    console.log('获取验证码');
    // 从后端获取验证码图片
    getCaptha(key).then(res => {
        let url = window.URL.createObjectURL(res);
        captcha.value = url
    })
}
//将token保存在全局状态
const accountStore = useAccountStore();
const nextStep = () => {
    registerPara.value.key = key.value
    register(registerPara.value).then(res => {
        console.log(res.code);
        if (res.code != 0) {
            msg.value = res.msg
        } else {
            console.log('登录:用户数据',res)
            accountStore.setAccount(res)
            localStorage.setItem("token", res.data.token.token)
            router.push({
                path: '/register/2'
            })}
        })
        }
</script>

<template>
    <div style="display: flex;flex-direction: column;justify-content: center;align-items: center;">
        <h1 style="margin-top: 70px;margin-bottom: 10px;">欢迎在此相聚</h1>
        <el-tag effect="dark" round type="success">步骤1 账户与密码</el-tag>
        <el-card class="box-card">
            <div class="card-header">
                <img style="height: 60px;" src="@/assets/imgs/login_mini.png">
            </div>
            <div>
                <!-- 账号 -->
                <el-input class="input" v-model="registerPara.account" placeholder="创建你的账号名">
                    <template #prepend>
                        <el-icon>
                            <TopRight />
                        </el-icon>
                    </template>
                </el-input>
                <!-- 密码 -->
                <el-input class="input" v-model="registerPara.password" show-password placeholder="设置你的密码">
                    <template #prepend>
                        <el-icon>
                            <TopRight />
                        </el-icon>
                    </template>
                </el-input>
                <!-- 验证码 -->
                <div style="margin-top: 5px;">
                    <el-input class="input-mini" v-model="registerPara.code" placeholder="验证码">
                        <template #append>
                            <el-button @click="refreshCaptcha">刷新</el-button>
                        </template>
                    </el-input>
                    <!-- 验证码图片 -->
                    <img class="img" :src="captcha">
                </div>
                
                <el-text type="danger" style="margin-left: 15px;">{{ msg }}</el-text>
                <!-- 下一步 -->
                <div style="text-align:center;margin-top: 40px;">
                    <el-button-group>
                        <el-button type="primary" @click="nextStep" size="large">下一步
                            <el-icon style="margin-left: 10px;" size="20">
                                <MagicStick />
                            </el-icon>
                        </el-button>
                    </el-button-group>
                </div>
            </div>
        </el-card>
    </div>
</template>

<style scoped>
.input {
    margin-top: 25px;
    height: 38px;
    width: 100%;
}

.input-mini {
    margin-top: 20px;
    height: 38px;
    width: 50%;
}

.img {
    height: 50px;
    margin-top: 20px;
    margin-left: 10px;
}

.card-header {
    display: flex;
    justify-content: center;
    align-items: center;
}


.box-card {
    margin-top: 10px;
    margin-left: 0;
    width: 340px;
    height: 410px;
    border-radius: 15px;
}
</style>